{% extends "base.html" %}
{% load comments_tags %}
{% load tasks_tags %}
{% block extra_js %}
<script src="{{ media_url }}/tasks.js" type="text/javascript"></script>
<script src="{{ media_url }}/jquery.autogrow.js" type="text/javascript"></script>
<style type="text/css">
#title-edit {
    font-size: 1.8em;
    font-weight: bold;
}
hr {
    border: 1px solid #ddd;
}
</style>
<script type="text/javascript" language="javascript" charset="utf-8">
/*
 * editableShow(editable, actions)
 *   @editable: the id of the entry/editable
 *   @actions: button box or action area to show while editing
 *
 * returns: void
 */

function editableToggle(editable) {    
    $("#action-area").attr('style', 'display: block');
    $("#"+editable).attr('class', 'editable-active');
}
function editableDone() {
    $('.editable-active').each(function (i) { this.className = 'editable' });
    $("#action-area").attr('style', 'display: none;');
    return true;
}
$(document).ready(function() {
    $("textarea.autogrow").autogrow();
});
</script>
{% endblock %}

{% block content %}
<a href="/notes/">« Back to notes</a>
<form name="notes_single" method="post" action="/notes/edit/post/">
<input type="hidden" name="notes_single_id" value="{{ note.id }}" />
<div id="action-area">
    <input type="reset"  value="Cancel" class="revert-button"
        onclick="editableDone()" />
    <input type="submit" value="Save changes" class="save-button"
        onclick="editableDone()" />
</div>

<input id="title-edit" 
    type="text" name="notes_single_title" size="55" value="{{ note.title }}" 
    class="editable" />
<a href="javascript:editableToggle('title-edit')" class="edit"><img src="{{ media_url }}/pencil.png"/>edit</a>

<div id="subject">
    <span id="subject-text">{% if note.subject.metapersona_set.all.0 %}{{ note.subject.metapersona_set.all.0.fullname }}{% else %}{{ note.subject }}{% endif %}</span>
    <select id="subject-edit" name="notes_single_subject" class="editable-combo">
    {% for persona in personas %}
        <option value="{{ persona.id }}" 
            {% ifequal persona.id note.subject.id %}
            selected="selected"
            {% endifequal %}>{{ persona.name }}
        </option>
    {% endfor %}
    </select>
    <a href="javascript:editableToggle('subject-edit')" class="edit"><img src="{{ media_url }}/pencil.png"/>edit</a>
</div>

<br/>

<textarea 
    cols="60" rows="3" name="notes_single_body" 
    class="autogrow editable" id="body-edit"
    onclick="editableToggle('body-edit')">{{ note.body }}</textarea>

<br/><br/>

</form>
<br/><br/>
Added by 
{% if note.author.metapersona_set.all.0 %}
    {{ note.author.metapersona_set.all.0.fullname }}
{% else %}
    {{ note.author }}
{% endif %}

<hr/>

{% for task in note.task_set.all %}
    <span id="task-{{ task.id }}" style="margin-top: 10px; margin-left: 30px; background-color: #ffd; margin-bottom: 10px; padding: 10px; display: block; width: auto;">
        {% task_single %}
    </span>
{% endfor %}

{% task_add %}
<hr/>

<h3>Replies</h3>
{% if note.notecomment_set.all %}
    {% for comment in note.notecomment_set.all %}
        {% comment_single %}
    {% endfor %}
{% endif %}
<h3>Comment on this</h3>
    {% comment_add %}
<br/><br/><br/><br/>
<hr/>
{% endblock %}
